<template>
	<view class="">
		姓名: {{name}} - {{age}}
		<scroll-view scroll-y="true" ref="scroll">
			<view class="">
				
			</view>
		</scroll-view>
		<navigator url="/pages/demo5/demo5">跳转到demo5</navigator>
		<view>--------</view>
		<view>计数: {{count}}</view>
		<navigator url="/pages/demo4/demo4" open-type="redirect">跳转到demo4</navigator>
		<view v-for="item in 50">循环 - {{item}}</view>
		
		<view class="gov" v-show="gov">广告</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onPageScroll
	} from '@dcloudio/uni-app'

	const name = ref('张三')
	const age = ref(18)
	const scroll = ref(null)
	const count = ref(0)
	const gov = ref(false)
	let interval = setInterval(()=>{
		count.value ++
	}, 50)

	onLoad((e) => {
		console.log('onLoad函数')
		name.value = e.name
		age.value = e.age
	})
	onReady(()=>{
		console.log('onReady函数')
	})
	onShow(()=>{
		console.log('onShow函数')
		interval = setInterval(()=>{
			count.value ++
		}, 50)
	})
	
	onHide(()=>{
		console.log('onHide函数')
		clearInterval(interval)
	})
	
	onUnload(()=>{
		console.log('onUnload函数')
	})
	
	onPageScroll((e)=>{
		gov.value = e.scrollTop > 200
	})
</script>

<style lang='scss' scoped>
.gov{
	position: fixed;
	right: 30px;
	bottom: 30px;
	width: 100px;
	height: 100px;
	background: orange;
}
</style>